<template>
  <!-- 产品映射资金源 -->
  <Card style="height:800px">
    <header>
      <span style="vertical-align:middle">产品名称:</span>
      <Select v-model="productType" @on-change="productTypeCheck" style="width:200px">
        <Option v-for="item in productTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <span style="width: 200px;margin-left: 20px;vertical-align:middle">版本号:</span>
      <Select v-model="version" @on-change="versionCheck" style="width:200px">
        <Option v-for="item in versionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <span style="width: 200px;margin-left: 20px;vertical-align:middle">产品细类:</span>
      <Select v-model="product" style="width:200px">
        <Option v-for="item in productList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <span style="width: 200px;margin-left: 20px;vertical-align:middle">资金方:</span>
      <Select v-model="fund" style="width:200px">
        <Option v-for="item in fundList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Button type="primary" @click="query" style="margin-left: 20px;">查询</Button>
      <Button type="primary" @click="handleRouterGo('cpyszjyaddiview')" style="margin-left: 10px;">新增</Button>
    </header>
    <Content style="margin-top:20px;">
      <Table border :columns="columns1" :data="data1"></Table>
    </Content>
    <div style="text-align:center;width:50%;margin:36px auto;">
      <Page :total="total" :current="currentPage" :page-size="pageSize" show-elevator show-total @on-change="handlePageChange"></Page>
    </div>
  </Card>
</template>

<script>

export default {
  data () {
    return {
      submit: '',
      modal1: false,
      gdh: '',
      productType: '',
      productTypeList: [],
      version: '',
      versionList: [],
      product: '',
      productList: [],
      fund: '',
      level: '',
      fundList: [],
      statusList: [
        {
          value: '1',
          label: '异常'
        },
        {
          value: '0',
          label: '正常'
        }
      ],
      createdcreated () {
        var vm = this
        this.$ajax = this.$util.ajax(this.$appContext.marvels_core_product)
        var param = JSON.parse(vm.$route.query.param)
        vm.productTypeName = param.productTypeName
        vm.product = param.productName
        vm.fund = param.fundName
        vm.updatedBy = param.updatedBy
        vm.updatedDate = param.updatedDate
        vm.level = param.level + ''
        if (param.status === '正常') {
          vm.status = '0'
        } else {
          vm.status = '1'
        }
        vm.type = vm.$route.query.type
        if (vm.type === '1') {
          vm.allMark = true
        }
      },
      columns1: [
        {
          type: 'index',
          title: '序号',
          width: 80,
          align: 'center'
        },
        {
          title: '产品大类',
          key: 'productTypeName',
          align: 'center'
        },
        {
          title: '产品',
          key: 'productName',
          align: 'center',
          width: 150
        },
        {
          title: '年化率',
          key: 'rate',
          align: 'center'
        },
        {
          title: '资金源',
          key: 'fundName',
          align: 'center'
        },
        {
          title: '优先级',
          key: 'level',
          align: 'center',
          render: (h, params) => {
            var vm = this

            return h('div', [
              vm.submit !== params.row.id + '' &&
                h(
                  'div',
                  {
                    props: {
                      value: vm.data1[params.index].level
                    }
                  },
                  vm.data1[params.index].level
                ),
              vm.submit === params.row.id + '' &&
                h('Input', {
                  props: {
                    value: vm.data1[params.index].level
                  },
                  on: {
                    'on-change': e => {
                      vm.templateData1[params.index].level =
                        e.target.value + ''
                    }
                  }
                })
            ])
          }
        },
        {
          title: '状态',
          align: 'center',
          key: 'status',
          width: 150,
          render: (h, params) => {
            var vm = this
            const status = params.row.status
            var statusName = ''
            for (var i = 0; i < vm.statusList.length; i++) {
              if (vm.statusList[i].value === status) {
                statusName = vm.statusList[i].label
                break
              }
            }
            return h('div', [
              vm.submit !== params.row.id + '' &&
                h(
                  'div',
                  {
                    props: {
                      value: vm.data1[params.index].status
                    }
                  },
                  statusName
                ),
              vm.submit === params.row.id + '' &&
                h(
                  'Select',
                  {
                    props: {
                      value: vm.data1[params.index].status
                    },
                    on: {
                      'on-change': value => {
                        vm.templateData1[params.index].status =
                          value
                      }
                    }
                  },
                  this.statusList.map(function (type) {
                    return h(
                      'Option',
                      {
                        props: { value: type.value }
                      },
                      type.label
                    )
                  })
                )
            ])
          }
        },
        {
          title: '操作',
          width: 300,
          align: 'center',
          render: (h, param, index) => {
            var vm = this
            var id = param.row.id + ''
            return h('div', [
              (vm.submit !== id || vm.submit === '') &&
                h(
                  'Button',
                  {
                    props: {
                      type: 'info',
                      size: 'small'
                    },
                    style: {
                      fontSize: '12px',
                      marginLeft: '5px'
                    },
                    on: {
                      click () {
                        sessionStorage.setItem('cpyszjy', '' + param.row.id)
                        vm.submit = param.row.id + ''
                      }
                    }
                  },
                  '编辑'
                ),
              vm.submit === id &&
                h(
                  'Button',
                  {
                    props: {
                      type: 'info',
                      size: 'small'
                    },
                    style: {
                      fontSize: '12px',
                      marginLeft: '5px'
                    },
                    on: {
                      click () {
                        var r = /^\+?[1-9][0-9]*$/
                        if (!r.test((vm.templateData1[param.index].level + '').trim()) && (vm.templateData1[param.index].level + '') !== '' && vm.templateData1[param.index].level !== undefined) {
                          vm.$Message.warning('优先级格式不正确')
                          return
                        }
                        sessionStorage.setItem('cpyszjy', '')
                        vm.submit = ''
                        var params = vm.templateData1[param.index]
                        vm.$ajax
                          .post(
                            vm.$appContext.marvels_core_product + 'product/mcpt/service/editProductMappingFund',
                            params
                          )
                          .then(re => {
                            var tmp = JSON.parse(
                              JSON.stringify(vm.templateData1)
                            )
                            vm.data1 = tmp
                          })
                          .catch(er => {})
                      }
                    }
                  },
                  '保存'
                ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginLeft: '18px'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '产品映射资金源',

                        content: '删除?',

                        okText: '确定',

                        cancelText: '取消',
                        onOk: () => {
                          var params = {
                            id: param.row.id,
                            deleteFlag: '1',
                            currentPage: 1,
                            pageSize: this.pageSize
                          }
                          this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/removeProductMappingFund', params).then(re => {
                            if (re.data.code === 'success') {
                              this.data1 = re.data.data.list
                              this.total = re.data.data.total
                              this.currentPage = re.data.data.pageNum
                            }
                          }).catch(er => { })
                        }
                      })
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      data1: [],
      templateData1: [],
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },

  created () {
    this.$ajax = this.$util.ajax()
    var vm = this
    var state = sessionStorage.getItem('cpyszjy')
    vm.submit = state
    // 产品大类查询
    vm.productTypeList.push({
      value: '',
      label: '请选择'
    })
    this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchProduct').then(re => {
      var allData = re.data.data
      for (var i = 0; i < allData.length; i++) {
        vm.productTypeList.push({
          value: allData[i].productType,
          label: allData[i].productTypeName
        })
      }
    })
    // 产品版本查询
    vm.versionList.push({
      value: '',
      label: '请选择'
    })
    this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchProductVersion')
      .then(re => {
        var allData = re.data.data
        for (var i = 0; i < allData.length; i++) {
          vm.versionList.push({
            value: allData[i].productVersion,
            label: allData[i].productVersion
          })
        }
      })
      .catch(er => { })
    // 产品小类查询
    vm.productList.push({
      value: '',
      label: '请选择'
    })
    this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchByVersion', {})
      .then(re => {
        for (var i = 0; i < allData.length; i++) {
          vm.productList.push({
            value: allData[i].productCode,
            label: allData[i].productName
          })
        }
      })
      .catch(er => { })
    // 获取所有资金源
    vm.fundList.push({
      value: '',
      label: '请选择'
    })
    this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/fund/service/list', {})
      .then(re => {
        var allData = re.data.data
        for (var i = 0; i < allData.length; i++) {
          vm.fundList.push({
            value: allData[i].fundCode,
            label: allData[i].fundName
          })
        }
      })
      .catch(er => { })
    vm.query()
  },
  methods: {
    handlePageChange (index) {
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchProductMappingFund', {
        productType: this.productType,
        productVersion: this.version,
        productCode: this.product,
        fundCode: this.fund,
        currentPage: index,
        pageSize: this.pageSize
      })
        .then(re => {
          this.data1 = re.data.data.list
          this.templateData1 = JSON.parse(JSON.stringify(this.data1))
          this.total = re.data.data.total
          this.currentPage = re.data.data.pageNum
        })
        .catch(er => { })
    },
    handleRouterGo (pathName) {
      this.$router.push(pathName)
    },
    // 点击大类获取相应的版本和小类
    productTypeCheck () {
      var vm = this
      vm.versionList = []
      vm.version = ''
      vm.versionList.push({
        value: '',
        label: '请选择'
      })
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchVersion', { productType: vm.productType })
        .then(re => {
          var allData = re.data.data
          for (var i = 0; i < allData.length; i++) {
            vm.versionList.push({
              value: allData[i].productVersion,
              label: allData[i].productVersion
            })
          }
        })
        .catch(er => { })
      vm.productList = []
      vm.product = ''
      vm.productList.push({
        value: '',
        label: '请选择'
      })
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchByVersion', { productType: vm.productType, version: vm.version })
        .then(re => {
          var allData = re.data.data
          for (var i = 0; i < allData.length; i++) {
            vm.productList.push({
              value: allData[i].productCode,
              label: allData[i].productName
            })
          }
        })
        .catch(er => { })
    },
    // 根据版本获取小类
    versionCheck () {
      var vm = this
      vm.productList = []
      vm.product = ''
      vm.productList.push({
        value: '',
        label: '请选择'
      })
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchByVersion', { productType: vm.productType, version: vm.version })
        .then(re => {
          var allData = re.data.data
          for (var i = 0; i < allData.length; i++) {
            vm.productList.push({
              value: allData[i].productCode,
              label: allData[i].productName
            })
          }
        })
        .catch(er => { })
    },
    query () {
      this.$ajax.post(this.$appContext.marvels_core_product + 'product/mcpt/service/searchProductMappingFund', {
        productType: this.productType,
        productVersion: this.version,
        productCode: this.product,
        fundCode: this.fund,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
        .then(re => {
          this.data1 = re.data.data.list
          this.templateData1 = JSON.parse(JSON.stringify(this.data1))
          this.total = re.data.data.total
          this.currentPage = re.data.data.pageNum
        })
        .catch(er => { })
    }
  }
}
</script>

<style lang="less">
</style>
